<template>
  <div class="establishMenu">
    <div class="user">
      <div class="close" @click="close">
        <span>X</span>
      </div>
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="usermessageName">
          <el-input
            v-model="ruleForm.usermessageName"
            :clearable="true"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="usermessageType">
          <el-input
            v-model="ruleForm.usermessageType"
            :clearable="true"
            placeholder="职务"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="userPhone">
          <el-input
            v-model="ruleForm.userPhone"
            maxlength="11"
            minlength="11"
            :clearable="true"
            placeholder="手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="usermessagePwd">
          <el-input
            v-model="ruleForm.usermessagePwd"
            :clearable="true"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="usermessageJobnumber">
          <el-input
            v-model.number="ruleForm.usermessageJobnumber"
            :clearable="true"
            placeholder="纯数字"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户状态" prop="usermessageStatus">
          <el-select v-model="ruleForm.usermessageStatus" placeholder="请选择">
            <el-option label="允许" value="允许"></el-option>
            <el-option label="禁止" value="禁止"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm', ruleForm)"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <!-- <el-button type="primary" @click="submitBtn(ruleForm)"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addUser } from "@/network/api/userme/userme";
import mitt from "@/utils/mitt";
export default {
  name: "EstablishMenu",
  data() {
    return {
      ruleForm: {
        usermessageName: "",
        userPhone: "",
        usermessageType: "",
        usermessageStatus: "",
        usermessageJobnumber: "",
        usermessagePwd: "",
      },
      rules: {
        usermessageName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        userPhone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度在11个字符", trigger: "blur" },
        ],
        usermessageType: [
          { required: true, message: "请输入角色", trigger: "blur" },
        ],
        usermessageStatus: [
          { required: true, message: "请输入用户状态", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        usermessageJobnumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
        ],
        usermessagePwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 关闭
    close() {
      mitt.emit("isshow", false);
    },
    submitForm(name, data) {
      // console.log(data);
      if (typeof data.usermessageJobnumber != "number") {
        alert("工号为纯数字");
        return;
      }
      data.usermessageJobnumber = String(data.usermessageJobnumber);
      this.$refs[name].validate((valid) => {
        if (valid) {
          alert("提交成功!");
          this.submitBtn(data);
          this.close();
        } else {
          console.log("填写有误");
          return false;
        }
      });
    },
    async submitBtn(data) {
      if (data.usermessageStatus == "允许") {
        data.usermessageStatus = 1;
      } else if (data.usermessageStatus == "禁止") {
        data.usermessageStatus = 0;
      }
      let adduserInfo = await addUser(data);
      this.$router.go(0);
      this.formInline = {};
      // this.close();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang='scss'>
.establishMenu {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  .user {
    width: 50%;
    padding: 20px 0;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: rgb(194, 233, 239);
    position: absolute;
    top: -280px;
    left: 200px;
    z-index: 99;
    .close {
      width: 15px;
      height: 15px;
      line-height: 15px;
      font-size: 12px;
      color: red;
      border: 1px solid white;
      cursor: pointer;
      border-radius: 50%;
      position: absolute;
      top: 5px;
      right: 8px;
    }
    .el-form-item {
      width: 45%;
    }
    .el-select {
      width: 80%;
    }
  }
}
</style>